<template>
    <div class="goods-detail-wrap">
        <!-- 属性 -->
        <ul class="attrs" v-if="goodsAttributes.length > 0">
          <template v-for="item in goodsAttributes" :key="item.value">
            <li v-if="item.value != ''">
              <span class="dt">{{item.name}}</span>
              <span class="dd" style=" width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{item.value}}</span>
            </li>
          </template>
        </ul>
        <!-- 图片 -->
        <img v-for="item in goodsAlbums" :key="item" :src="global.FILE_DOMAIN+item" alt="">
    </div>
</template>
<script setup>
import { inject } from 'vue'

// 获取全局对象
const global = inject('global')
const goodsAttributes = inject('goodsAttributes')
const goodsAlbums = inject('goodsAlbums')

</script>
<style scoped lang="scss">
.goods-detail-wrap {
  padding: 10px 40px;
  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;
      .dt {
        width: 100px;
        color: #999;
      }
      .dd {
        flex: 1;
        color: #666;
      }
    }
  }
  > img {
    width: 100%;
  }
}
</style>